<template>
  <view class="footer-wrap-components" :style="[wrapStyle, componentsStyle]"><slot></slot></view>
</template>

<script>
import mixins from '@/mixins/components.js';
export default {
  name: 'footer-wrap',
  mixins: [mixins],
  props: {
    bgColor: {
      type: String,
      default: '#fff'
    },
    safeArea: {
      type: Boolean,
      default: false
    },
    height: {
      type: [String, Number]
    }
  },
  data() {
    return {};
  },
  computed: {
    componentsStyle() {
      const style = {};
      const { bgColor, height,safeArea } = this;
      if (height) style.height = /[rpx]/.test(height) ? height : `${height}rpx`;
      if (safeArea) style.paddingBottom = 'env(safe-area-inset-bottom) !important';
      style.backgroundColor = bgColor;
      return style;
    }
  }
};
</script>

<style scoped lang="scss">
.footer-wrap-components {
  left: 0;
  bottom: 0;
  width: 100%;
  z-index: 999;
  position: fixed;
}
</style>
